<template>
	<view class="container">
<our-loading isFullScreen :active="active" text="loading..." background-color="#ffffff" />
		<view class="bg bg-color-base margin-b20"></view>

		<view class="tab vs-row vs-align-center flex">
			<image class="tab-bg" :src="set.b_img" mode=""></image>

			<view class="vs-row vs-align-center flex">
				<view class="vs-column vs-align-center margin-r40 " style="width: 100px;">
					<u-tabs :list="list" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>

				</view>

			</view>
		</view>
      <block v-if="current==0">
		  
		  <view class="login margin-b80">
		  	<view class="input vs-row vs-align-center margin-b40 flex">
		  		<image class="input-icon margin-r20" src="/static/account.png" mode=""></image>
		  		<input autocomplete="off" v-model="username" class="vs-flex-item  font-30" type="text" :maxlength="11" placeholder="请输入您的用户名"
		  		 placeholder-class="input-placeholder" />
		  	</view>
		  	<view class="input vs-row vs-align-center margin-b40 flex">
		  		<image class="input-icon margin-r20" src="/static/password.png" mode=""></image>
		  		<input autocomplete="off" v-model="password" class="vs-flex-item  font-30" type="text" password placeholder="请输入您的登录密码"
		  		 placeholder-class="input-placeholder" />
		  	</view>
		  </view>
		  
		  
		  
		  <view class="button">
		  	<u-button type="primary" throttle-time="500" :loading="dloading" @click="login">立即登录</u-button>
		  </view>
	  </block>
	  <block v-else>
		  
		  
		  <view class="login margin-b80">
		  	<view class="input vs-row vs-align-center margin-b40 flex">
		  		<image class="input-icon margin-r20" src="/static/account.png" mode=""></image>
		  		<input v-model="rusername" class="vs-flex-item  font-30" type="text" :maxlength="11" placeholder="请输入您的用户名"
		  		 placeholder-class="input-placeholder" />
		  	</view>
		  	<view class="input vs-row vs-align-center margin-b40 flex">
		  		<image class="input-icon margin-r20" src="/static/password.png" mode=""></image>
		  		<input v-model="rpassword" class="vs-flex-item  font-30" type="text" password placeholder="请输入您的登录密码"
		  		 placeholder-class="input-placeholder" />
		  	</view>
			
			<view class="input vs-row vs-align-center margin-b40 flex">
				<image class="input-icon margin-r20" src="/static/realname.png" mode=""></image>
				<input v-model="realname" class="vs-flex-item  font-30" type="text"  placeholder="请输入您的姓名"
				 placeholder-class="input-placeholder" />
			</view>
			
			
			<view class="input vs-row vs-align-center margin-b40 flex">
				<image class="input-icon margin-r20" src="/static/mobile.png" mode=""></image>
				<input v-model="mobile" class="vs-flex-item  font-30"  type="number"  placeholder="请输入您的手机"
				 placeholder-class="input-placeholder" />
			</view>
			
			<!-- <view class="input vs-row vs-align-center margin-b40 flex">
				<image class="input-icon margin-r20" src="/static/address.png" mode=""></image>
				<input v-model="address" class="vs-flex-item  font-30" type="text"  placeholder="请输入您的地址"
				 placeholder-class="input-placeholder" />
			</view> -->
			
			<!-- <view class="input vs-row vs-align-center margin-b40 flex">
				<image class="input-icon margin-r20" src="/static/company.png" mode=""></image>
				<input v-model="company" class="vs-flex-item  font-30" type="text"  placeholder="请输入您的公司名称"
				 placeholder-class="input-placeholder" />
			</view> -->
		  </view>
		  
		  
		  
		  <view class="button">
		  	<u-button type="primary" throttle-time="500" :loading="rloading" @click="register">立即注册</u-button>
		  </view>
		  
	  </block>


		<view class="bz" :style="{position:current==0?'absolute':'static'}">
		{{set.bdesc}}
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				rusername: "",
				rpassword: "",
				realname:"",
				mobile:"",
				address:"",
				company:"",
				dloading:false,
				rloading:false,
				set:{},
				active: true,
				cur: 0,
				username: "",
				password: "",
				list: [{
					name: '登录'
				}, {
					name: '注册'
				}],
				current: 0
			}
		},
		onShareAppMessage(res) {

		},
		computed: {



		},
		onShow:function(){
			
			if (uni.getStorageSync("user")){
				this.$u.route("/pages/user/index")
				 return
			}
		},
         onLoad:function(){
			 
			
			
          	this.$u.post('set', {}).then(res => {
          		this.active=false
          		this.set=res
          		
          	});
         },
		methods: {
			register(){
				
				if (this.rusername==""){
					this.msg("用户名不能为空")
					return
				}
				    
				if (this.rpassword==""){
					 this.msg("密码不能为空")
					 return
				}
				if (this.realname==""){
					 this.msg("姓名不能为空")
					 return
				}   
						
				if (!this.$u.test.mobile(this.mobile)) {
				
					 this.msg("手机格式不正确")
					return
				}
				// if (this.address==""){
				// 	 this.msg("地址不能为空")
				// 	 return
				// }  
				this.rloading=true
				this.$u.post('register', {
					username:this.rusername,
					password:this.rpassword,
					realname:this.realname,
					mobile:this.mobile,
					address:this.address,
					company:this.company,
					
				}).then(res => {
					this.rloading=false
				    if (res.status==1){
						  uni.setStorageSync("user",res.user)
						  this.$u.route("/pages/user/index")
 					}else{
						this.msg(res.msg)
					}
					
				});
				
			},
          	change(index) {
          				this.current = index;
          			},
			login() {

				//验证
				if (this.password == "") {
					uni.showToast({
						title: "密码不能为空",
						duration: 2000,
						icon: "none"
					})

					return
				}

				if (this.username == "") {
					uni.showToast({
						title: "用户名不能为空",
						duration: 2000,
						icon: "none"
					})

					return
				}

               this.dloading=true;
				this.$u.post('login', {
					username: this.username,
					password: this.password
				}).then(res => {
                      this.dloading=false;
				
					if (res.status == 1) {
						uni.setStorageSync('user', res.user);
                       
						uni.navigateTo({
							url: "/pages/user/index?name="+Math.random(),	
						})

					} else {
                   
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"

						})
					}


				})



			}
		}
	}
</script>

<style lang="scss">
	@import url("./uni.scss");

	page {
		height: 100%;
	}

	.bz {
		text-align: center;
		box-sizing: border-box;
		margin: 0px auto;
		color: #999;
		width: 100%;
		line-height: 25px;
		font-size: 12px;
		padding: 10px;
		position: absolute;
		bottom: 10upx;
	}

	.container {
		position: relative;
		height: 100%;

	}

	.bg {
		position: relative;
		width: 750rpx;
		height: 400rpx;
	}

	.tab {
		position: absolute;
		top: 250rpx;
		left: 20rpx;
		right: 20rpx;
		height: 150rpx;
		padding: 0 50rpx;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		&-bg {
			position: absolute;
			top: -200rpx;
			right: -0rpx;
			width: 390rpx;

			height: 285rpx;
		}
	}

	.line {
		width: 25rpx;
		height: 7rpx;
	}

	.login,
	.register {
		padding: 0 60rpx;
	}

	.input {
		width: 630rpx;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: rgba(80, 100, 235, 0.1);
		border-radius: 5pxs;

		&-icon {
			width: 40rpx;
			height: 40rpx;
		}

		&-placeholder {
			// color: #5064eb;
		}
	}

	.button {
		width: 630rpx;
		height: 90rpx;
		margin-left: 60rpx;
		border-radius: 5px;
	}

	.separator {
		height: 2rpx;
		margin: 0 30rpx;
		background-color: #f5f5f5;
	}

	.other {
		&-items {
			padding: 0 200rpx;
		}

		&-icon {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
